// 点击添加商铺出现遮罩层和form表单
// 获得添加商铺这个标签，注册点击事件
let ov = document.querySelector(".btn")
// 注册点击事件
ov.addEventListener("click", function () {

    document.querySelector('.form-zhe').style.display = "block"
})
//点击叉叉，关闭遮罩层
// 获取叉叉标签
let chacha = document.querySelector(".over")
let zhe = document.querySelector(".form-zhe")
chacha.addEventListener("click", function () {
    zhe.style.display = "none"
})


// 定义一个空字符串，保存拼接好的字符串
let x = ""
// 获取三个input框里的值和textarea的值，再获取提交标签，获取table标签，然后拼接好放到页面上
// 获取input框里的值
let input = document.querySelectorAll(".form-zhong  input")
// input的值
let inputs = input[0].value
// 获取textarea的值
let text = document.querySelector("textarea")
// 获取提交标签
let btns = document.querySelector(".tijiao")
// 获取table标签
let tables = document.querySelector("table")

// console.log(1111,x)
// 给提交按钮注册事件
btns.addEventListener("click", function () {
    // 判断表单里的输入框和文本域是否为空，为空弹出提示框，都不为空提交成功，放到页面上
    if (input[0].value === '' || input[1].value === "" || input[2].value === '' || text.value === '') {
        alert('店铺信息必须全部填写')
        return
    }
    // 拼接标签
    x += `<tr>
            <td>${input[0].value}</td>
            <td>${input[1].value}</td>
            <td>${input[2].value}</td>
            <td>${text.value}</td>
            <td><button>删除</button></td>
            </tr>`
    // console.log(input[0].value)
    // 拼接好的字符串放到页面上
    tables.innerHTML += x
    // 点击提交按钮，模态框关闭
    zhe.style.display = "none"
    // 点击提交按钮后，输入框和多行文本域内容清除
    input[0].value=""
    input[1].value=""
    input[2].value=""
    text.value=""

    

})

//，通过冒泡事件给父元素注册删除事件，通过处理函数来删除
// 拿到父元素
let tabless = document.querySelector("table")
// console.log(table);
// 给父元素注册点击事件
tabless.addEventListener("click", function (e) {
    if (e.target.nodeName === 'BUTTON') {
        if(confirm('确定删除本条信息吗')){
            e.target.parentNode.parentNode.remove()
        }      
    }
})



